<template>
  <div>
    <!-- 风险评估 -->
    <h-row>
      <h-col span="20" offset="2">
        <h-form class="scrollable-form" :model="question" label-position="top">
          <h2 style="text-align: center;margin-bottom: 2vh;">商业银行理财客户风险评估问卷</h2>
          <h-form-item label="1.您的年龄是？" required>
            <h-radio-group v-model="question.age">
              <h-radio label="-2">18-25</h-radio>
              <h-radio label="0">25-50</h-radio>
              <h-radio label="-1">51-60</h-radio>
              <h-radio label="-3">61-65</h-radio>
              <h-radio label="-10">65以上</h-radio>
            </h-radio-group>
          </h-form-item>

          <h-form-item label="2.您的家庭总资产净值为（折合人民币）？" required>
            <h-radio-group v-model="question.money">
              <h-radio label="0">15 万元及以下</h-radio>
              <h-radio label="2">15 万元（不含）-50 万元（含）</h-radio>
              <h-radio label="6">50 万元（不含）-100 万元（含）</h-radio>
              <h-radio label="8">100 万元（不含）-1000 万元（含）</h-radio>
              <h-radio label="10">1000 万元（不含）以上</h-radio>
            </h-radio-group>
          </h-form-item>

          <h-form-item
            label="3.在您的家庭总资产净值中，可用于金融投资（储蓄存款除外）的比例为？"
            required
          >
            <h-radio-group v-model="question.ratio">
              <h-radio label="2">小于 10% </h-radio>
              <h-radio label="4">10%至 25%</h-radio>
              <h-radio label="8">25%至 50%</h-radio>
              <h-radio label="10">大于 50%</h-radio>
            </h-radio-group>
          </h-form-item>

          <h-form-item label="4.以下哪项最能说明您的投资经验？ " required>
            <h-radio-group v-model="question.experice" vertical>
              <h-radio label="0"
                >除存款、国债外，我几乎不投资其他金融产品
              </h-radio>
              <h-radio label="2"
                >大部分投资于存款、国债等，较少投资于股票、基金等风险产品</h-radio
              >
              <h-radio label="6"
                >资产均衡地分布于存款、国债、银行理财产品、信托产品、股票、基金等</h-radio
              >
              <h-radio label="10"
                >大部分投资于股票、基金、外汇等高风险产品，较少投资于存款、国债</h-radio
              >
            </h-radio-group>
          </h-form-item>

          <h-form-item
            label="5.您有多少年投资股票、基金、外汇、金融衍生产品等风险投资品的经验？  "
            required
          >
            <h-radio-group v-model="question.expericeAge">
              <h-radio label="0">没有经验</h-radio>
              <h-radio label="2">有经验，但少于 2 年</h-radio>
              <h-radio label="6">2 至 5 年</h-radio>
              <h-radio label="8">5 至 8 年</h-radio>
              <h-radio label="10">8 年以上</h-radio>
            </h-radio-group>
          </h-form-item>

          <h-form-item label="6.以下哪项描述最符合您的投资态度？  " required>
            <h-radio-group v-model="question.atitude" vertical>
              <h-radio label="0"
                >厌恶风险，不希望本金损失，希望获得稳定回报
              </h-radio>
              <h-radio label="4"
                >保守投资，不希望本金损失，愿意承担一定幅度的收益波动</h-radio
              >
              <h-radio label="8"
                >寻求资金的较高收益和成长性，愿意为此承担有限本金损失</h-radio
              >
              <h-radio label="10"
                >希望赚取高回报，愿意为此承担较大本金损失</h-radio
              >
            </h-radio-group>
          </h-form-item>

          <h-form-item
            label="7.本金 100 万元，不提供保本承诺的情况下，您会选择哪一种投资机会？"
            required
          >
            <h-radio-group v-model="question.chance" vertical>
              <h-radio label="0"
                >有 100%的机会赢取 1000 元现金，并保证归还
              </h-radio>
              <h-radio label="4"
                >有 50%的机会赢取 5 万元现金，并有较高可能性归还本金</h-radio
              >
              <h-radio label="6"
                >有 25%的机会赢取 50 万元现金，并有一定的可能性损失本金</h-radio
              >
              <h-radio label="10"
                >有 10%的机会赢取 100 万元现金，并有价高可能性损失本金</h-radio
              >
            </h-radio-group>
          </h-form-item>

          <h-form-item
            label="8.投资于理财、股票、基金等金融投资品（不含存款和国债）时，您可接受的最长投资期限是多久？"
            required
          >
            <h-radio-group v-model="question.investmentHorizon">
              <h-radio label="4">1 年以下</h-radio>
              <h-radio label="6">1－3 年</h-radio>
              <h-radio label="8">3—5 年</h-radio>
              <h-radio label="10">5 年以上</h-radio>
            </h-radio-group>
          </h-form-item>

          <h-form-item label="9.您的投资目的是" required>
            <h-radio-group v-model="question.goal">
              <h-radio label="2">资产保值</h-radio>
              <h-radio label="6">资产稳健增值</h-radio>
              <h-radio label="10">资产迅速增值</h-radio>
            </h-radio-group>
          </h-form-item>

          <h-form-item
            label="10.您的投资出现何种程度的波动时，您会呈现明显的焦虑？"
            required
          >
            <h-radio-group v-model="question.anxious" vertical>
              <h-radio label="-5">本金无损失，但收益未达预期</h-radio>
              <h-radio label="0">出现轻微本金损失</h-radio>
              <h-radio label="5">本金 10％以内的损失</h-radio>
              <h-radio label="10">本金 20-50％的损失</h-radio>
              <h-radio label="15">本金 50％以上损失</h-radio>
            </h-radio-group>
          </h-form-item>

          <h-form-item label="11.对您而言，保本比高收益更为重要" required>
            <h-radio-group v-model="question.cost">
              <h-radio label="-2">非常同意</h-radio>
              <h-radio label="0">同意</h-radio>
              <h-radio label="2">无所谓</h-radio>
              <h-radio label="4">不同意</h-radio>
              <h-radio label="5">非常不同意</h-radio>
            </h-radio-group>
          </h-form-item>
          <h-row>
            <h-col span="24" class="button-container">
              <h-button type="primary" @click="next">下一步</h-button>
              <h-button type="primary" @click="pre" style="margin-left: 2vh"
                >上一步</h-button
              >
            </h-col>
          </h-row>
        </h-form>
      </h-col>
    </h-row>
  </div>
</template>

<script>
export default {
  name: "enterRiskAssessments",
  data() {
    return {
      summ: 0,
      question: {
        age: 0,
        money: 0,
        ratio: 0,
        experice: 0,
        expericeAge: 0,
        atitude: 0,
        chance: 0,
        investmentHorizon: 0,
        goal: 0,
        anxious: 0,
        cost: 0,
      },
      preference: "",
      preferenceList: [
        { value: "1", label: "保守型" },
        { value: "2", label: "稳健型" },
        { value: "3", label: "平衡型" },
        { value: "4", label: "成长型" },
        { value: "5", label: "进取型" },
      ],
    };
  },
  mounted() {
    //取出数据
    this.preference = this.$store.getters["user/userInfo"].preference;
  },
  beforeDestroy() {
    //保存数据
    this.$store.commit("user/setPreference", this.preference);
  },
  methods: {
    cheeck(){
      if (
        this.question.age === 0 ||
        this.question.money === 0 ||
        this.question.ratio === 0 ||
        this.question.experice === 0 ||
        this.question.expericeAge === 0 ||
        this.question.atitude === 0 ||
        this.question.chance === 0 ||
        this.question.investmentHorizon === 0 ||
        this.question.goal === 0 ||
        this.question.anxious === 0 ||
        this.question.cost === 0
      ) {
        this.$hMessage.warning("请填写完整信息");
        return false;
      }
      return true;
    },
    next() {
      if(!this.cheeck()){
        return;
      }
      let sum = Object.values(this.question).reduce(
        (total, num) => total + Number(num),
        0
      );
      console.log(this.question, sum);
      if (sum <= 15) {
        this.preference = "R1";
      } else if (sum <= 35) {
        this.preference = "R2";
      } else if (sum <= 60) {
        this.preference = "R3";
      } else if (sum <= 80) {
        this.preference = "R4";
      } else {
        this.preference = "R5";
      }
      this.$hMsgBox.confirm({
        title: "风险评估结果",
        content: "您的风险偏好为" + this.preference + "，是否确认？",
        cancelText: "重新填写",
        onOk: () => {
          //跳转到下一个组件
          this.$store.commit("components/incrementCurrentRegister");
        },
        onCancel: () => {
          this.$hMessage.info("您选择重新填写");
          //清空question
          this.question = {
            age: 0,
            money: 0,
            ratio: 0,
            experice: 0,
            expericeAge: 0,
            atitude: 0,
            chance: 0,
            investmentHorizon: 0,
            goal: 0,
            anxious: 0,
            cost: 0,
          };
        },
      });
    },
    pre() {
      //跳转到上一个组件
      this.$store.commit("components/decrementCurrentRegister");
    },
  },
};
</script>

<style lang="scss" scoped>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrollable-form {
  height: 47vh; /* 你可以根据需要设置这个值 */
  overflow: auto;
}

.input {
  width: 70vh;
}
</style>